<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="学期" prop="semeId">
        <el-select v-model="queryParams.semeId" placeholder="请选择学期" :style="{width: '100%'}" @change="getSemesterDeptInfo">
          <el-option v-for="(item, index) in semeOptions" :key="index" :label="item.value"
                     :value="item.key" :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分党校" prop="deptId">
        <el-select v-model="queryParams.deptId" placeholder="请选择分党校" filterable
                   :style="{width: '100%'}"  @change="getSemesterDeptInfo">
          <el-option v-for="(item, index) in deptOptions" :key="index" :label="item.value"
                     :value="item.key" :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="12">
      <!--   左侧   -->
      <el-col :lg="15">
        <el-card>
          <div slot="header">
            <span>数据统计</span>
          </div>
          <el-row v-loading="loadingDeptData">
            <el-col :span="8">
              <div class="countCard">
                <div>{{semeDeptInfo.applyCount}}</div>
                <div>已报名人数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="countCard">
                <div>{{semeDeptInfo.checkedCount}}</div>
                <div>已审核人数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="countCard">
                <div>{{semeDeptInfo.groupUserCount}}</div>
                <div>已分组人数</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <div slot="header">
            <span>分党校信息</span>
            <el-button @click="submitForm" style="margin-left: 20px;">提交</el-button>
            <el-switch
              v-model="form.started"
              active-text="开启报名"
              inactive-text="关闭报名"
              style="padding-left: 10px"
              :active-value="1"
              :inactive-value="0"
              @change="changeActive()"
            >
            </el-switch>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loadingDeptData">
            <el-row>
              <el-col :sm="12">
                <el-form-item label="管理员名字" prop="managerName">
                  <el-input v-model="form.managerName" placeholder="请输入管理员名字" />
                </el-form-item>
              </el-col>
              <el-col :sm="12">
                <el-form-item label="管理员电话" prop="managerPhone">
                  <el-input v-model="form.managerPhone" placeholder="请输入管理员电话" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="12">
                <el-form-item label="管理员QQ" prop="managerQq">
                  <el-input v-model="form.managerQq" placeholder="请输入管理员QQ" />
                </el-form-item>
              </el-col>
              <el-col :sm="12">
                <el-form-item label="班长名字" prop="monitorName">
                  <el-input v-model="form.monitorName" placeholder="请输入班长名字" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="12">
                <el-form-item label="班长电话" prop="monitorPhone">
                  <el-input v-model="form.monitorPhone" placeholder="请输入班长电话" />
                </el-form-item>
              </el-col>
              <el-col :sm="12">
                <el-form-item label="班长QQ" prop="monitorQq">
                  <el-input v-model="form.monitorQq" placeholder="请输入班长QQ" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :sm="12">
                <el-form-item label="分党校校长名" prop="teacherName">
                  <el-input v-model="form.teacherName" placeholder="请输入分党校校长名" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
      <el-col :lg="9">
        <el-row>
          <el-card style="text-align: center">
            <div>
              <div style="font-size: 20px;">
                <i class="el-icon-s-check"></i>{{semeDeptInfo.deptName}}
              </div>
            </div>
            <div>
              注册人数：{{semeDeptInfo.deptRegisterCount}}
            </div>
          </el-card>
        </el-row>
        <el-row>
          <el-card>
            <div slot="header">
              <span>操作流程说明</span>
            </div>
            <div class="opt-list">
              <div>1.填写分党校联系人信息，开启报名功能</div>
              <el-divider></el-divider>
              <div>2.通知学员注册账号，报名；审核学员报名信息</div>
              <el-divider></el-divider>
              <div>3.报名结束，关闭报名功能；对学员分组</div>
              <el-divider></el-divider>
              <div>4.录入考核成绩；通知学员评教，个人小结</div>
              <el-divider></el-divider>
              <div>5.填写小组评议与党委意见</div>
              <el-divider></el-divider>
              <div>6.导出/打印学员登记表，鉴定表，结业证</div>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getSemesterDept, saveSemesterDept } from "@/api/psedu-base/semesterDept";
  import { semeAndPsDeptOption } from "@/api/psedu-base/selectOption"
  export default {
    name: "SemesterDept",
    data() {
      return {
        // 遮罩层
        loading: true,
        loadingDeptData: false,
        // 显示搜索条件
        showSearch: true,
        semeOptions: [],
        deptOptions: [],
        // 学期分党校表格数据
        semesterDeptList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        semeDeptInfo: {},
        // 表单参数
        form: {
          deptId: null,
          semeId: null,
          mergeClassId: null,
          managerName: null,
          managerPhone: null,
          managerQq: null,
          monitorName: null,
          monitorPhone: null,
          monitorQq: null,
          teacherName: null,
          started: null
        },
        // 表单校验
        rules: {
          managerName: [
            {required: true, message: '请输入管理员名称', trigger: 'blur'}
          ],
          managerPhone: [
            {required: true, message: '请输入管理员手机号', trigger: 'blur'}
          ],
          managerQq: [
            {required: true, message: '请输入管理员QQ', trigger: 'blur'}
          ],
          monitorName: [
            {required: true, message: '请输入班长名称', trigger: 'blur'}
          ],
          monitorPhone: [
            {required: true, message: '请输入班长手机号', trigger: 'blur'}
          ],
          monitorQq: [
            {required: true, message: '请输入班长QQ', trigger: 'blur'}
          ],
          teacherName: [
            {required: true, message: '请输入辅导员名称', trigger: 'blur'}
          ]
        }
      };
    },
    created() {
      this.getSemeAndPsDeptOption()
        .then(() => {
            console.log(this.queryParams.semeId)
            console.log(this.queryParams.deptId)
            this.getSemesterDeptInfo();
        });
    },
    methods: {
      getSemeAndPsDeptOption() {
        return semeAndPsDeptOption().then(res => {
          this.deptOptions = res.data.deptList;
          this.semeOptions = res.data.semeList;
          this.queryParams.deptId = this.deptOptions[0].key
          this.queryParams.semeId = this.semeOptions[0].key
          return Promise.resolve();
        })
      },
      /** 查询学期分党校列表 */
      getSemesterDeptInfo() {
        this.loadingDeptData = true;
        getSemesterDept(this.queryParams.semeId, this.queryParams.deptId).then(res => {
          console.log(res);
          this.semeDeptInfo = res.data;
          this.form = res.data.semesterDept ?? {};
          this.loadingDeptData = false;
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      changeActive(newStatus) {
        let data = {
          started: this.form.started,
          deptId: this.form.deptId,
          semeId: this.form.semeId
        };
        saveSemesterDept(data).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.getSemesterDeptInfo();
          this.open = false;
        }).catch(err => {
          this.form.started = 1 ? 0 : 1;
        });
      },
      // 表单重置
      reset() {
        this.form = {
          deptId: null,
          semeId: null,
          mergeClassId: null,
          managerName: null,
          managerPhone: null,
          managerQq: null,
          monitorName: null,
          monitorPhone: null,
          monitorQq: null,
          teacherName: null,
          started: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            saveSemesterDept({...this.form, 'deptId': this.queryParams.deptId, 'semeId': this.queryParams.semeId}).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getSemesterDeptInfo();
              this.open = false;
            });
          }
        });
      },
    }
  };
</script>

<style scoped>
  .countCard {
    text-align: center;
  }
  .countCard div:nth-child(1) {
    color: #367394;
    font-size: 30px;
  }
  .countCard div:nth-child(2) {
    font-size: 13px;
  }
  /deep/ .el-divider--horizontal {
    margin: 8px 0;
  }
  .opt-list {
    font-size: 13px;
  }
</style>
